<template>
	<div class="image-children-item" :class="props.text" @click="onClick">
		<div class="checkbox center" v-if="props.type === 'checkbox'">
			<el-checkbox @click.stop v-model="myValue" />
		</div>
		<el-tooltip
			v-if="props.type === 'remove'"
			:effect="store.colorScheme"
			content="移除此图片"
			:show-after="800"
			placement="top">
			<div class="remove center">
				<el-icon @click="emits('remove')"><RemoveFilled /></el-icon>
			</div>
		</el-tooltip>
		<div class="image center" @click.stop>
			<el-image :src="props.src" :preview-src-list="previewSrcList" fit="fill" />
		</div>
		<el-tooltip
			v-if="props.text"
			:effect="store.colorScheme"
			:content="props.text"
			:show-after="800"
			placement="top">
			<div class="text beyond-hiding-reverse">
				{{ props.text.split('').reverse().join('') }}
			</div>
		</el-tooltip>
	</div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useRootStore } from '@v/store';
import { RemoveFilled } from '@element-plus/icons-vue';

const store = useRootStore();

const emits = defineEmits(['update:modelValue', 'remove']);

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	type: {
		type: String,
		default: 'remove',
	},
	src: String,
	text: String,
});

const previewSrcList = computed(() => {
	if (props.src) {
		return [props.src];
	}
});

let myValue = ref(props.modelValue);

watch(myValue, (s) => {
	emits('update:modelValue', s);
});
watch(
	() => props.modelValue,
	(s) => {
		myValue.value = s;
	}
);

function onClick() {
	if (props.type === 'checkbox') {
		myValue.value = !myValue.value;
	}
}
</script>

<style scoped lang="scss">
.image-children-item {
	padding-left: 47px;
	height: 52px;
	display: flex;
	align-items: center;
	&:hover {
		background-color: var(--opacity-purity-color-6);
	}
	.image {
		margin-right: 10px;
		:deep(.el-image) {
			width: 30px;
			height: 30px;
		}
	}
	.center {
		display: flex;
		align-items: center;
	}
	.checkbox {
		margin-right: 15px;
	}
	.remove {
		margin-right: 15px;
		:deep(.el-icon) {
			font-size: 18px;
			cursor: pointer;
		}
		:deep(.el-icon:hover) {
			color: var(--theme-danger-color);
		}
	}
	.text {
		font-size: 13px;
		user-select: none;
		padding-right: 15px;
	}
}
</style>
